<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div{
      width: 300px;
      height: 300px;
      background: pink;
      position: absolute;
      animation: run 1s ease 0s infinite alternate;
      /* animation: 动画名称 花费时间 运动方式 多久开始 次数 是否反方向(反向会来回走); */
      /* 动画名称:就是定义动画的时候的名字 */
      /* 花费时间:这个动画需要多久, 需要2s就写2s, 可以写小数 */
      /* 运动方式:linear(匀速) ease(逐渐慢下来) ease-out(减速)  ease-in-out(先加速后减速) */
      /* 多久开始:等待多久才开始,马上开始是0s */
      /* 播放次数:需要1次就写1,无限循环用 infinite */
      /* 是否反方向:默认不是反方向, 反方向就写alternate(会来回走)  */
  }

  /* 先定义动画,在调用动画 */
  /* run是动画名称,必须是英文 */
  @-webkit-keyframes run {
      /* form:从哪里来 */
      from{
          left:0;
      }

      /* 去哪里 */
      to{
          left:800px;
      }
  }
</style>
<body>
<div></div>
</body>
</html>